<template>
  <div>
    <el-container>
      <el-aside width="210px" style="overflow:hidden" class="leftbar_bg">
        <el-menu :defaultActive="activeIndex" :uniqueOpened="true">
          <template v-for="(item , idx) in sideMenu">
            <el-submenu
              :index="item.id"
              v-if="item.id==10501||item.id==10504||item.id==10514"
              :key="idx"
            >
              <template slot="title">
                <i class="iconfont icon-shebeileibanqiu"></i>
                &nbsp;&nbsp;{{item.name}}
              </template>
              <div v-if="item.id==10501">
                <el-menu-item
                  v-for="(citem, cindex) in eqsubmenu"
                  :key="cindex"
                  :index="citem.id"
                  @click="addTab2(citem)"
                >{{citem.name}}</el-menu-item>
              </div>

              <div v-if="item.id==10504">
                <el-menu-item
                  v-for="(citem, cindex) in eqsubmenu2"
                  :key="cindex"
                  :index="citem.id"
                  @click="addTab2(citem)"
                >{{citem.name}}</el-menu-item>
              </div>

              <div v-if="item.id==10514">
                <el-menu-item
                  v-for="(citem, cindex) in eqsubmenu3"
                  :key="cindex"
                  :index="citem.id"
                  @click="addTab2(citem)"
                >{{citem.name}}</el-menu-item>
              </div>
            </el-submenu>
            <el-menu-item
              :index="item.id"
              :key="idx"
              @click="addTab(item)"
              style="text-align:left"
              v-if="item.id!=10501&&item.id!=10504&&item.id!=10514"
            >
              <i class="iconfont icon-shebeijianding" v-if="item.id=='10502'"></i>
              <i class="iconfont icon-wj-jczj" v-if="item.id=='10503'"></i>
              <i class="iconfont icon-shebeijiandingshiyongren" v-if="item.id=='10505'"></i>
              <i class="iconfont icon-shebeijiandingshenheren" v-if="item.id=='10506'"></i>
              <i class="iconfont icon-shebeijiandingpizhunren" v-if="item.id=='10507'"></i>
              <i class="iconfont icon-wj-jczj" v-if="item.id=='10508'"></i>
              <i class="iconfont icon-wj-jczj" v-if="item.id=='10509'"></i>
              <i class="iconfont icon-wj-jczj" v-if="item.id=='10510'"></i>
              <i class="iconfont icon-wj-jczj" v-if="item.id=='10511'"></i>
              <i class="iconfont icon-wj-jczj" v-if="item.id=='10512'"></i>
              <i class="iconfont icon-wj-jczj" v-if="item.id=='10513'"></i>
              &nbsp;&nbsp;{{item.name}}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <el-container class="main_bg">
        <el-main>
          <el-tabs
            v-model="editableTabsValue"
            type="border-card"
            closable
            @tab-remove="removeTab"
            @tab-click="tabclick"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <!-- <eqmanager v-if="item.id=='10501'"></eqmanager> -->
              <eqmanager v-if="item.id=='1050101'" :eqtype="'040201'"></eqmanager>
              <eqmanager v-if="item.id=='1050102'" :eqtype="'040202'"></eqmanager>
              <eqmanager v-if="item.id=='1050103'" :eqtype="'040203'"></eqmanager>
              <eqmanager v-if="item.id=='1050104'" :eqtype="'040204'"></eqmanager>

              <!-- <eqmanager2 v-if="item.id=='10504'"></eqmanager2> -->
              <eqmanager2 v-if="item.id=='1050401'" :eqtype="'040201'"></eqmanager2>
              <eqmanager2 v-if="item.id=='1050402'" :eqtype="'040202'"></eqmanager2>
              <eqmanager2 v-if="item.id=='1050403'" :eqtype="'040203'"></eqmanager2>
              <eqmanager2 v-if="item.id=='1050404'" :eqtype="'040204'"></eqmanager2>

              <eqmanager3 v-if="item.id=='1051401'" :eqtype="'040201'"></eqmanager3>
              <eqmanager3 v-if="item.id=='1051402'" :eqtype="'040202'"></eqmanager3>
              <eqmanager3 v-if="item.id=='1051403'" :eqtype="'040203'"></eqmanager3>
              <eqmanager3 v-if="item.id=='1051404'" :eqtype="'040204'"></eqmanager3>

              <material v-if="item.id=='1050100'" :usertype="'gly'"></material>
              <material v-if="item.id=='1050400'" :usertype="'fzr'"></material>

              <eqschedule v-if="item.id=='10502'"></eqschedule>
              <eqschedule2 v-if="item.id=='10505'"></eqschedule2>
              <eqschedule3 v-if="item.id=='10506'"></eqschedule3>
              <eqschedule4 v-if="item.id=='10507'"></eqschedule4>
              <periodcheck v-if="item.id=='10503'"></periodcheck>
              <periodcheck2 v-if="item.id=='10508'"></periodcheck2>

              <maintain1 v-if="item.id=='10512'"></maintain1>
              <maintain2 v-if="item.id=='10513'"></maintain2>

              <repair1 v-if="item.id=='10509'"></repair1>
              <repair2 v-if="item.id=='10510'"></repair2>

              <eqapprove v-if="item.id=='10511'"></eqapprove>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import material from '~/components/apparatus/eqmanager/material.vue';
import eqmanager from '~/components/apparatus/eqmanager/eqmanager.vue';
import eqmanager2 from '~/components/apparatus/eqmanager/eqmanager2.vue';
import eqmanager3 from '~/components/apparatus/eqmanager/eqmanager3.vue';
import eqschedule from '~/components/apparatus/eqschedule/eqschedule.vue';
import eqschedule2 from '~/components/apparatus/eqschedule/eqschedule2.vue';
import eqschedule3 from '~/components/apparatus/eqschedule/eqschedule3.vue';
import eqschedule4 from '~/components/apparatus/eqschedule/eqschedule4.vue';
import periodcheck from '~/components/apparatus/periodcheck/periodcheck.vue';
import periodcheck2 from '~/components/apparatus/periodcheck/periodcheck2.vue';
import maintain1 from '~/components/apparatus/eqmaintain/maintain1.vue';
import maintain2 from '~/components/apparatus/eqmaintain/maintain2.vue';
import repair1 from '~/components/apparatus/eqrepair/repair1.vue';
import repair2 from '~/components/apparatus/eqrepair/repair2.vue';
import eqapprove from '~/components/apparatus/eqrepair/eqapprove.vue';

export default {
  data() {
    return {
      activeIndex: '',
      sideMenu: [],
      defaultopeneds: [],
      ts: this.newStore(),
      data: null,
      editableTabsValue: null,
      editableTabs: [],
      eqsubmenu: [
        {
          name: '主要仪器设备',
          id: '1050101',
          loadpage: '1050101',
        },
        {
          name: '辅助仪器设备',
          id: '1050102',
          loadpage: '1050102',
        },
        {
          name: '参考标准',
          id: '1050103',
          loadpage: '1050103',
        },
        {
          name: '标准物质',
          id: '1050100',
          loadpage: '1050100',
        },
        {
          name: '作废仪器设备',
          id: '1050104',
          loadpage: '1050104',
        },
      ],

      eqsubmenu2: [
        {
          name: '主要仪器设备',
          id: '1050401',
          loadpage: '1050401',
        },
        {
          name: '辅助仪器设备',
          id: '1050402',
          loadpage: '1050402',
        },
        {
          name: '参考标准',
          id: '1050403',
          loadpage: '1050403',
        },
        {
          name: '标准物质',
          id: '1050400',
          loadpage: '1050400',
        },
      ],

      eqsubmenu3: [
        {
          name: '主要仪器设备',
          id: '1051401',
          loadpage: '1051401',
        },
        {
          name: '辅助仪器设备',
          id: '1051402',
          loadpage: '1051402',
        },
        {
          name: '参考标准',
          id: '1051403',
          loadpage: '1051403',
        },
      ],
    };
  },
  components: {
    periodcheck,
    eqschedule,
    eqapprove,
    eqmanager,
    eqschedule2,
    eqschedule3,
    eqschedule4,
    eqmanager2,
    periodcheck2,
    material,
    maintain1,
    maintain2,
    repair1,
    repair2,
    eqmanager3,
  },
  created() {
    this.getSidemenu();
  },
  methods: {
    tabclick(tab) {
      console.log(tab);

      this.activeIndex = tab.name;
    },
    addTab2(item) {
      console.log(item);
      this.$nextTick(() => {
        let ishas = false;
        const tabdata = {
          title: item.name,
          name: item.loadpage,
          id: item.id,
          content: '',
        };
        for (let i = 0; i < this.editableTabs.length; i += 1) {
          if (this.editableTabs[i].name == tabdata.name) {
            ishas = true;
            break;
          }
        }
        if (!ishas) {
          this.editableTabs.push(tabdata);
        }
        this.editableTabsValue = item.loadpage;
      });
    },
    addTab(item) {
      console.log(item);
      this.$nextTick(() => {
        let ishas = false;
        const tabdata = {
          title: item.name,
          name: item.id,
          id: item.id,
          content: '',
        };
        for (let i = 0; i < this.editableTabs.length; i += 1) {
          if (this.editableTabs[i].name == tabdata.name) {
            ishas = true;
            break;
          }
        }
        if (!ishas) {
          this.editableTabs.push(tabdata);
        }
        this.editableTabsValue = item.id;
      });
    },
    removeTab(targetName) {
      const tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    getSidemenu() {
      const req = {
        handle:
          '67A5B6FEF17D97DECF116BDF95B95C0B843B7A441565EC6C4A6860EBB8D9E769',
        supid: '105',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.data = ts.d.data.operation1[0].hash.privstr;
        this.sideMenu = JSON.parse(this.data);
        console.log(this.sideMenu, '2132');

        this.activeIndex = this.sideMenu[3].id;
        this.addTab(this.sideMenu[3]);
      });
    },
  },
};
</script>


<style lang="stylus" socped>
.el-submenu__title, .el_submenu_title i {
  background:rgb(50, 50, 59) ;
  text-align: left;
  color: #fff;
}

.el-submenu__title i, .el-submenu__title i {
  color: #fff;
}

.el-submenu__title:focus, .el-submenu__title:hover {
  background: #fff;
}

.el-submenu__title:focus i, .el-submenu__title:hover i, .el-submenu__title:focus, .el-submenu__title:hover {
  color: #000;
}

color #fff, .el-menu-item:focus, .el-menu-item:hover {
  background: #fff;
  color: #000;
}

.el-menu {
  border: 0;
}

.el-submenu__title.is-active,.el-submenu__title.is-active i{
  background:#fff;
  color:#000
}

.el-menu-item:focus i, .el-menu-item:hover i{
  color:#000;
}

.el-menu-item {
  background:rgb(50, 50, 59) ;
  text-align: center;
  color: #fff;
}

.el-menu-item i {
  font-size: 20px;
  float: left;
  color:#fff
}

.el-menu-item.is-active {
  background: #fff;
  color: #000;
}
</style>
